<template>
  <div>
    <!-- 模板解析时会自动读取count的value属性 -->
    <h2>count: {{count}}</h2>
    <h2>msg2: {{msg}}</h2>
    <h2>user2: {{user}}</h2>
    <h2>numbers2: {{numbers}}</h2>

    <button @click="update">更新</button>
  </div>
</template>

<script lang="ts">

import {
  reactive, ref, toRefs, watch
} from 'vue'

interface IState {
  msg: string
  user: {
    name: string,
    age: number,
    sex?: string
  }
  numbers: Array<number>
}

export default {
  name: 'About',

  setup() {

    const count = ref(1)

    const state = reactive<IState>({
      msg: 'abc',
      user: {
        name: 'tom',
        age: 12,
      },
      numbers: [1, 3, 5]
    })
    console.log(state)

    // 监视一个ref数据
    watch(count, (newVal, oldVal) => {
      console.log('count watch', newVal, oldVal)
    })

    // 监视一个reactive数据
    watch(() => state.msg, (newVal, oldVal) => {
      console.log('msg watch', newVal, oldVal)
    })

    // 监视多个数据
    watch([count, () => state.msg], (newVal, oldVal) => {
      console.log('coutn & msg watch', newVal, oldVal)
    })

    
    const update = () => {
      // count.value += 2
      // 更新一个已有的基本属性
      state.msg += '--'
      // state.user.name += '++'
      // 直接添加一个新属性  ==> 可以, 但vue2中不可以
      // state.user.sex = '男'
      // 直接通过下标更新数组的元素 ==> 可以, 但vue2中不可以
      // state.numbers[1] = 8
    }


    return {  // 对象中的所有函数模板都可以直接访问
      count,
      ...toRefs(state),
      update
    }
  }
  
}
</script>

<style scoped>

</style>
